<template>

    <div class="upload">


        <!-- action 上传地址，before-upload 开始上传监听，on-success 上传成功监听 -->
        <!-- :headers 上传head，：data 上传附带的参数 -->

        <!-- 预览删除: on-preview, on-remove , before-remove -->
        <!-- multiple 多文件上传（bool），limit 上传个数限制，on-exceed 超出选择文件提示监听，file-list 选择的文件数据集-->
        <!-- list-type 显示类型（ text/picture/picture-card ） -->


         <!-- 上传 -->
        <el-upload
            v-loading="loading"
            element-loading-text="上传中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            accept="image/*"
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :data="data"
            :before-upload="beforeUpload"
            :on-success="successHandle"
        >
         
            <!-- 图片 -->
            <img v-if="img !== ''" :src="img" class="avatar" />

            <!-- 没上传图片 -->
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

        </el-upload>


        <!-- 删除按钮 -->
        <p class="del" v-if="img !== ''" @click="delPic">
            <i class="el-icon-delete"></i>
        </p>


    </div>
</template>
<script>
export default {

    //外部属性
    props: {
        img: {
            type: String,
            default: ''
        }
    },


    watch: {

        //img 值的改变 
        img(value) {
            console.log(value);
            console.log('图片');
            this.file = value;
        },

        //清空方法调用 时 
        clearList() {
            this.file = '';
        },

        //文件发生改变时  
        file(value) {

            const list = value;
            console.log(value);
            this.img = value;
            this.$emit('update', list);//会回调 引用页面的 update方法
        }
    },
    data() {
        return {

            file: this.img ? this.img : '',

            //接口请求 参数 
            data: {
                TOKEN: sessionStorage.getItem('token')
            },
            loading: false,
            uploadURL: window.baseUrl + '/sys/file/upload',
            
        };
    },
    methods: {

        // 开始上传监听 
       beforeUpload(file) {
            this.loading = true;
             const isJPG = (file.type == 'image/jpeg') || (file.type == 'image/jpg') ||
             (file.type == 'image/gif') || (file.type == 'image/png');

             if (!isJPG) {
                this.$message.error('上传的文件 只能是图片格式为 JPEG/JPG/GIF/PNG 格式!');

                return false;

            }
            return  isJPG;
        },

        //上传成功监听
        successHandle(response, file, fileList) {
            var url = window.baseUrl + '/sys/file/showpic?id=' + response.result[0];
            this.file = url;
            this.loading = false;
        },

        // 删除图片操作
        delPic() {
            this.file = '';
        },
       
        
    }
};
</script>
<style >
.upload {
    position: relative;
    width: 100px;
    height: 100px;
}
.upload:hover .del {
    display: block;
}
.del {
    position: absolute;
    right: 0px;
    top: 0;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
}
.del i {
    color: #fff;
    font-size: 25px;
}
.upload .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.upload .avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.upload .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.upload .el-upload--text,
.upload .el-form-item__content {
    width: 100px;
    height: 100px;
    display: block;
}
.upload .avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>